<template>
  <el-form class="login-form" status-icon :rules="registerRules" ref="registerForm" :model="registerForm" label-position="left" label-width="80px">
    <el-form-item prop="userIdentity.userId" label="登录账号">
      <el-input @keyup.enter.native="handleRegister" v-model="registerForm.userIdentity.userId" placeholder="请输入学号"></el-input>
    </el-form-item>
    <el-form-item prop="userIdentity.name" label="真实姓名">
      <el-input @keyup.enter.native="handleRegister" v-model="registerForm.userIdentity.name" placeholder="请输入姓名"></el-input>
    </el-form-item>

    <el-form-item prop="userIdentity.password" label="密码">
      <el-tooltip content="密码已使用多种摘要算法组合加密" placement="top-start">
        <el-input @keyup.enter.native="handleRegister" :type="passwordType" v-model="registerForm.userIdentity.password" auto-complete="off" placeholder="请输入密码">
          <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
        </el-input>
      </el-tooltip>
    </el-form-item>

    <el-form-item label="性别" prop="userIdentity.gender">
      <el-radio-group v-model="registerForm.userIdentity.gender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="学历" prop="userIdentity.education">
      <el-radio-group v-model="registerForm.userIdentity.education">
        <el-radio label="本科生"></el-radio>
        <el-radio label="研究生"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="入学年份" prop="students.enroleYear">
      <el-date-picker
        v-model="registerForm.students.enroleYear"
        type="year"
        value-format='yyyy'
        placeholder="选择年">
      </el-date-picker>
    </el-form-item>
    <el-form-item prop="students.classMajorName" label="专业班级">
      <el-input @keyup.enter.native="handleRegister" v-model="registerForm.students.classMajorName" auto-complete="off" placeholder="请输入专业班级"></el-input>
    </el-form-item>
    <el-form-item label="出生日期" prop="userIdentity.birthday">
      <el-date-picker
        v-model="registerForm.userIdentity.birthday"
        type="date"
        placeholder="选择日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd">
      </el-date-picker>
    </el-form-item>
    <el-form-item prop="userIdentity.email" label="邮箱">
      <el-input @keyup.enter.native="handleRegister" v-model="registerForm.userIdentity.email"></el-input>
    </el-form-item>
    <el-form-item prop="userIdentity.phone" label="手机号">
      <el-input @keyup.enter.native="handleRegister" v-model="registerForm.userIdentity.phone"></el-input>
    </el-form-item>

    <el-button type="primary" @click.native.prevent="handleRegister" class="login-submit">注册</el-button>
  </el-form>
</template>

<script>
import request from '@/utils/request'
import { isvalidStr } from '@/utils/validate'

export default {
  name: 'userLogin',
  data() {
    const validStr = (rule, value, callback) => {
      if (!isvalidStr(value)) {
        callback(new Error('请输入'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'login',
      passwordType: 'password',
      // 注册表单
      registerForm: {
        students: {
          classMajorName: null,
          enroleYear: null
        },
        userIdentity: {
          birthday: null,
          education: null,
          email: null,
          gender: null,
          name: null,
          password: null,
          phone: null,
          roleId: 0,
          status: 0,
          userId: null
        }
      },
      registerRules: {
        students: {
          classMajorName: [{ required: true, trigger: 'blur', message: '必填项' }],
          enroleYear: [{ required: true, trigger: 'blur', message: '必填项' }]
        },
        userIdentity: {
          birthday: [{ required: true, trigger: 'blur', message: '必填项' }],
          education: [{ required: true, trigger: 'blur', message: '必填项' }],
          email: [{ required: true, trigger: 'blur', message: '必填项' }],
          gender: [{ required: true, trigger: 'blur', message: '必填项' }],
          name: [{ required: true, trigger: 'blur', message: '必填项', validate: validStr }],
          password: [{ required: true, trigger: 'blur', message: '必填项' }],
          phone: [{ required: true, trigger: 'blur', message: '必填项' }],
          userId: [{ required: true, trigger: 'blur', message: '必填项', validate: validStr },
            { min: 6, message: '账号长度最少为6位', trigger: 'blur' }]
        }
      }
    }
  },
  methods: {
    handleRegister() {
      // 验证，只有信息符合规则才能进行下一步操作
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          // 调用user.js中的事件
          request.post('ac/register', this.registerForm).then(res => {
            this.$message({
              message: '恭喜你，注册成功',
              type: 'success'
            })
            this.resetForm('registerForm')
            this.$emit('switchToLogin')
            console.log('跳转后')
          }).catch(res => {
            this.$message.error(res.content)
          })
        } else {
          return false
        }
      })
    },
    showPassword() {
      this.passwordType === ''
        ? (this.passwordType = 'password')
        : (this.passwordType = '')
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields() // 此处用this.$refs[formName].resetFields()后会把表单置空的原因是初始data里的数据就是空的
      this.formData = { ...this.resetData }
    }
  }
}
</script>
